<template>
	<view>
		<uni-group title="热门搜索" margin-top="20">
			<block v-for="(item,index) in hotList" :key="index">
				<button class="mini-btn hot" type="default" size="mini" @click="goSearch(item.keywords)">{{item.keywords}}</button>
			</block>
		</uni-group>
		
		<view class="ui-list-group">
			<view class="ui-list-title">
				<view class="ui-list-title-left">
					搜索历史
				</view>
				<view class="ui-list-title-right" @click="clearSearch()">
					清除
				</view>
			</view>
			
			<view class="ui-list-content">
				<block v-for="(item,index) in hotList" :key="index">
					<view class="ui-list-content-item">
						<view class="ui-list-content-item-left" @click="goSearch(item.keywords)">{{item.keywords}}</view>
						<view class="ui-list-content-item-right" @click="deleteSearch(item.id)">
							<uni-icons type="closeempty" color="#999" size="16"></uni-icons>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				hotList: [],
				searchList: [],
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateBack();
		},
		onNavigationBarSearchInputChanged (val) {
			this.goSearch(val.text);
		},
		onLoad() {
			this.getHot()
			this.getSearch()
		},
		methods: {
			// 获取热门搜索
			getHot() {
				uni.request({
					url: this.$host + '/search/hot',
					success: (res) => {
						this.hotList = res.data.data
					}
				});
			},
			// 获取搜索历史
			getSearch() {
				uni.request({
					url: this.$host + '/search/history',
					success: (res) => {
						this.searchList = res.data.data
					}
				});
			},
			// 跳转搜索列表
			goSearch(val) {
				uni.navigateTo({
					url: '../course/list?keywords=' + val
				})
			},
			// 清空历史记录
			clearSearch() {
				console.log(1);
			},
			// 删除历史记录
			deleteSearch(id) {
				console.log(id);
			}
		}
	}
</script>

<style lang="scss">
	.hot {
		margin-right: 32rpx;
	}
	
	.ui-list-group {
		background: #fff;
		margin-top: 10px;
	}
	.ui-list-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 15px;
		height: 40px;
		background-color: #f8f8f8;
		font-weight: normal;
		color: #333;
	}
	.ui-list-title-left {
		font-size: 14px;
		color: #333;
	}
	.ui-list-title-right {
		position: absolute;
		right: 15px;
	}
	.ui-list-content {
		padding: 0 15px;
	}
	.ui-list-content-item {
		position: relative;
		display: flex;
		flex-direction: row;
		flex: 1;
		overflow: hidden;
		height: 28px;
		border-bottom: 1px solid #efeff4;
	}
	.ui-list-content-item-left {
		width: 95%;
		left: 15px;
	}
	.ui-list-content-item-right {
	    width: 5%;
		padding-right: 0;
	}
</style>
